<template>
  <div class="container">
    <el-drawer
      v-model="show_preview_box"
      direction="rtl"
      :size="show_preview_type == 1 ? form_width + '%' : '80%'"
      :close-on-click-modal="false"
      @close="EventBus.emit('close_preview_box')"
      destroy-on-close
    >
      <template #title>
        <h4 v-if="show_preview_type == 2">列表预览</h4>
        <h4 v-else>表单预览</h4>
      </template>
      <template #default>
        <el-table v-if="show_preview_type == 2" :data="table_list" border class="tc">
          <el-table-column label="序号" type="index" width="100px"></el-table-column>
          <el-table-column
            v-for="item in table_header_list"
            :label="item.name"
          ></el-table-column>
        </el-table>
        <div v-else>
          <div class="fs_24 fw tc flex_cc">
            <span
              class="cp"
              v-for="(item, index) in form_list"
              :class="form_index == index ? 'c_3580eb' : ''"
              @click="(form_index = index), (layout_list_key += 1);"
            >
              {{ item.name }}<span v-if="index != form_list.length - 1">--></span></span
            >
          </div>
          <div v-for="item1 in form_list[form_index].layout_list">
            <el-form v-if="item1.children_list" label-width="140px">
              <div v-for="item2 in item1.children_list">
                <el-form-item
                  v-if="
                    !item2.condition_show ||
                    (item2.condition_show && validata_condition(item2))
                  "
                  :label="item2.name"
                  :rules="[
                    {
                      required: item2.is_required,
                      message: '请完善' + item2.name,
                      trigger: type_list.includes(item2.item_type) ? 'change' : 'blur',
                    },
                  ]"
                >
                  <selector
                    class="m_left10 fs1"
                    :item1="item2"
                    :selector_type="'main'"
                  ></selector>
                </el-form-item>
              </div>
            </el-form>
            <el-divider v-else></el-divider>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import selector from "./selector.vue";
import EventBus from "@/utils/EventBus";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  show_preview_box: Boolean,
  show_preview_type: Number,
  form_list: Array,
  form_width: Number,
});
const type_list = ["select", "radio", "checkBox", "tree", "switch"];
const { show_preview_box, show_preview_type, form_list, form_width } = toRefs<any>(props);
const table_list = ref([]);
const table_header_list = ref([]);
const form_index = ref(0);
const layout_list_key = ref(0);
table_header_list.value = [];
watch(
  () => show_preview_box.value,
  (a, b) => {
    if (a) {
      let all_list = JSON.parse(JSON.stringify(form_list.value));
      table_header_list.value = [];
      all_list.forEach((i) => {
        i.layout_list.forEach((ii) => {
          ii.children_list = ii.children_list.filter((iii) => {
            return iii.show_table;
          });
          table_header_list.value = table_header_list.value.concat(ii.children_list);
        });
      });
    }
  }
);
const condition_fun = (e) => {
  let children_list = [];
  form_list.value[form_index.value].layout_list.forEach((item) => {
    children_list = children_list.concat(item.children_list);
  });
  console.log(e, children_list);
  let code_arr = [];
  children_list.forEach((i) => {
    code_arr.push(i.code);
  });
  let value_arr = [];
  children_list.forEach((i) => {
    value_arr.push(i.value + "");
  });
  console.log(code_arr, value_arr);
  let str = "";
  e.forEach((i, index) => {
    str += i.code + "=" + i.value.toString() + (index != e.length - 1 ? i.relate : "");
  });
  console.log(str);
  let arr = str.split("||");
  return arr.some((i) => {
    return i.includes("&&")
      ? i.split("&&").every((ii) => {
          return (
            code_arr.includes(ii.split("=")[0]) && value_arr.includes(ii.split("=")[1])
          );
        })
      : code_arr.includes(i.split("=")[0]) && value_arr.includes(i.split("=")[1]);
  });
};
// 显示条件校验 当前表单控件的值满足所有该控件的条件
const validata_condition = (e) => {
  let curr_condition_list = store.state.condition_setup_list.filter((item) => {
    return item.code == e.code;
  });
  let curr_children_list = [];
  form_list.value[form_index.value].layout_list.forEach((ii) => {
    curr_children_list = curr_children_list.concat(ii.children_list);
  });
  if (!curr_condition_list.length) return true;
  let arr = curr_condition_list[0].condition_list.filter((item) => {
    return item.type == "display";
  });
  return condition_fun(arr[0].children_list);
};
</script>

<style lang="scss" scoped></style>
